<template>
  <div ref="chart" style="width: 1000px; height: 670px;background-image: url(src/img/OIP-C.jpg) ; background-repeat: no-repeat; background-size: 800px 520px;background-position: center;" ></div>

</template>

<script>
import * as echarts from 'echarts';
import { fetchData } from '../Api/api.js';

export default {
  data() {
    return {
      chart: null,
      locations: [],
      totalMsgCountsByLocation: [],
    };
  },
  async mounted() {
    const data = await fetchData('getthree');
    // 过滤数据，确保只显示中国大陆地区（除海南）
    this.locations = data
        .filter(item => {
          const lng = parseFloat(item.senderLng);
          const lat = parseFloat(item.senderLat);
          // 中国大陆地区经纬度范围（除海南）
          return (
              lng >= 73.66 && lng <= 135.05 &&
              lat >= 18.15 && lat <= 53.55 &&
              !(lng >= 108.37 && lng <= 111.05 && lat >= 18.10 && lat <= 20.10) // 排除海南
          );
        })
        .map(item => [item.senderLng, item.senderLat]);

    this.totalMsgCountsByLocation = data.map(item => item.totalMsgCnt);
    this.initChart();
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.chart);
      const option = {
        title: {
          text: '中国大陆地区消息分布（除海南）',
          left: 'center',
          textStyle: {
            fontSize: 16,
            color: '#333'
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: params => {
            return `位置: (${params.data[0].toFixed(4)}°E, ${params.data[1].toFixed(4)}°N)<br/>
                    消息数: ${params.data[2]}`;
          }
        },
        xAxis: {
          type: 'value',
          name: '经度(°E)',
          min: 73.66,  // 中国大陆最西端经度（新疆帕米尔高原）
          max: 135.05, // 中国大陆最东端经度（黑龙江抚远）
          axisLine: { show: false },
          axisTick: { show: false },
          splitLine: { show: false },
          nameTextStyle: {
            color: 'black',
            padding: [0, 0, 0, 50] // 调整名称位置
          },
          axisLabel: {
            color: 'black',
            formatter: value => value.toFixed(0) + '°'
          }
        },
        yAxis: {
          type: 'value',
          name: '纬度(°N)',
          min: 18.15,  // 中国大陆最南端纬度（广东徐闻）
          max: 53.55,  // 中国大陆最北端纬度（黑龙江漠河）
          axisLine: { show: false },
          axisTick: { show: false },
          splitLine: { show: false },
          nameTextStyle: {
            color: 'black',
            padding: [0, 0, 30, 0] // 调整名称位置
          },
          axisLabel: {
            color: 'black',
            formatter: value => value.toFixed(0) + '°'
          }
        },
        series: [{
          name: '消息分布',
          type: 'scatter',
          data: this.locations.map((loc, index) => [...loc, this.totalMsgCountsByLocation[index]]),
          symbolSize: function (data) {
            return Math.min(15, Math.max(5, data[2] / 50)); // 限制点的大小范围
          },
          itemStyle: {
            color: '#1890ff',
            opacity: 0.8
          },
          label: {
            show: true,
            formatter: params => params.data[2] > 100 ? params.data[2] : '', // 只显示大于100的消息数
            color: 'black',
            fontSize: 10,
            position: 'top'
          },
          emphasis: {
            itemStyle: {
              color: '#ff4d4f',
              borderColor: '#fff',
              borderWidth: 2
            }
          }
        }],
        visualMap: {
          min: 0,
          max: Math.max(...this.totalMsgCountsByLocation),
          text: ['消息数多', '消息数少'],
          inRange: {
            color: ['#e6f7ff', '#1890ff', '#0050b3']
          },
          calculable: true,
          orient: 'horizontal',
          left: 'center',
          top: 'bottom',
          textStyle: {
            color: 'black',
            fontSize: 12,
            fontWeight: 'bold'
          },
          bottom: 20
        }
      };
      this.chart.setOption(option);

      window.addEventListener('resize', this.handleResize);
    },
    handleResize() {
      this.chart && this.chart.resize();
    }
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize);
    this.chart && this.chart.dispose();
  }
};
</script>